<template>
  <div class="orders-container">
    <div class="orders-header">
      <h2>我的订单</h2>
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部订单" name="all" />
        <el-tab-pane label="待付款" name="unpaid" />
        <el-tab-pane label="待发货" name="unshipped" />
        <el-tab-pane label="待收货" name="shipped" />
        <el-tab-pane label="已完成" name="completed" />
      </el-tabs>
    </div>

    <div class="orders-content">
      <el-card
        v-for="order in filteredOrders"
        :key="order.id"
        class="order-card"
      >
        <div class="order-header">
          <div class="order-info">
            <span class="order-number">订单号：{{ order.orderNumber }}</span>
            <span class="order-date">{{ order.createTime }}</span>
          </div>
          <el-tag :type="getStatusType(order.status)">
            {{ getStatusText(order.status) }}
          </el-tag>
        </div>

        <div class="order-items">
          <div v-for="item in order.items" :key="item.id" class="order-item">
            <img :src="item.image" :alt="item.name" class="item-image" />
            <div class="item-info">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-spec">{{ item.spec }}</div>
              <div class="item-price">
                <span class="price">¥{{ item.price.toFixed(2) }}</span>
                <span class="quantity">x{{ item.quantity }}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="order-footer">
          <div class="order-total">
            共 {{ getOrderItemsCount(order) }} 件商品 合计：<span
              class="total-price"
              >¥{{ order.totalAmount.toFixed(2) }}</span
            >
          </div>
          <div class="order-actions">
            <el-button
              v-if="order.status === 'unpaid'"
              type="primary"
              @click="goPay(order)"
            >
              立即付款
            </el-button>
            <el-button
              v-if="order.status === 'shipped'"
              type="success"
              @click="confirmReceive(order)"
            >
              确认收货
            </el-button>
            <el-button
              v-if="['completed', 'unpaid'].includes(order.status)"
              type="danger"
              plain
              @click="deleteOrder(order)"
            >
              删除订单
            </el-button>
          </div>
        </div>
      </el-card>

      <!-- 空状态 -->
      <el-empty v-if="filteredOrders.length === 0" description="暂无相关订单">
        <el-button type="primary" @click="router.push('/')"> 去购物 </el-button>
      </el-empty>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

const router = useRouter();
const activeTab = ref("all");

// 模拟订单数据
const orders = ref([
  {
    id: 1,
    orderNumber: "ORDER202403150001",
    createTime: "2024-03-15 14:30:00",
    status: "unpaid",
    totalAmount: 1998.0,
    items: [
      {
        id: 1,
        name: "Nike Air Max 270",
        spec: "颜色：黑色；尺码：42",
        price: 999.0,
        quantity: 2,
        image:
          "https://img2.baidu.com/it/u=1705766420,380501671&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
      },
    ],
  },
  {
    id: 2,
    orderNumber: "ORDER202403150002",
    createTime: "2024-03-15 15:20:00",
    status: "shipped",
    totalAmount: 599.0,
    items: [
      {
        id: 2,
        name: "Adidas 运动T恤",
        spec: "颜色：白色；尺码：L",
        price: 599.0,
        quantity: 1,
        image: "https://example.com/t-shirt.jpg",
      },
    ],
  },
]);

// 根据标签筛选订单
const filteredOrders = computed(() => {
  if (activeTab.value === "all") return orders.value;
  return orders.value.filter((order) => order.status === activeTab.value);
});

// 获取订单状态样式
const getStatusType = (status) => {
  const types = {
    unpaid: "warning",
    unshipped: "info",
    shipped: "primary",
    completed: "success",
  };
  return types[status] || "info";
};

// 获取订单状态文本
const getStatusText = (status) => {
  const texts = {
    unpaid: "待付款",
    unshipped: "待发货",
    shipped: "待收货",
    completed: "已完成",
  };
  return texts[status] || status;
};

// 计算订单商品总数
const getOrderItemsCount = (order) => {
  return order.items.reduce((sum, item) => sum + item.quantity, 0);
};

// 去支付
const goPay = (order) => {
  router.push(`/payment/${order.id}`);
};

// 确认收货
const confirmReceive = (order) => {
  ElMessageBox.confirm("确认已收到商品？", "确认收货", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    order.status = "completed";
    ElMessage.success("确认收货成功");
  });
};

// 删除订单
const deleteOrder = (order) => {
  ElMessageBox.confirm("确定要删除该订单吗？", "删除订单", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    orders.value = orders.value.filter((o) => o.id !== order.id);
    ElMessage.success("订单已删除");
  });
};

// 标签切换
const handleTabClick = () => {
  // 可以在这里添加其他逻辑
};
</script>

<style scoped>
.orders-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.orders-header {
  margin-bottom: 20px;
}

.order-card {
  margin-bottom: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.order-info {
  display: flex;
  gap: 20px;
  color: #666;
}

.order-items {
  margin-bottom: 15px;
}

.order-item {
  display: flex;
  gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.order-item:last-child {
  border-bottom: none;
}

.item-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-weight: 500;
  margin-bottom: 5px;
}

.item-spec {
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
}

.item-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  color: #f56c6c;
  font-weight: 500;
}

.quantity {
  color: #999;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.total-price {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}

.order-actions {
  display: flex;
  gap: 10px;
}
</style> 